<template>
  <up-navbar placeholder bgColor="unset" auto-back></up-navbar>
  <view class="banner-box">
    <image :src="prefixURL(data.houseInfo.image)" class="banner-img" mode="" v-if="data.current == 1"></image>
    <video :src="prefixURL(data.houseInfo.video)" class="banner-img" mode="" v-if="data.current == 2"></video>
    <image :src="prefixURL(data.houseInfo.house_images)" class="banner-img" mode="" v-if="data.current == 3"></image>
    <view class="u-flex-xy-center change-box">
      <view :class="['banner-btn',data.current == 1?'active':'']" @click="data.current = 1">图片</view>
      <view :class="['banner-btn',data.current == 2?'active':'']" @click="data.current = 2">视频</view>
      <view :class="['banner-btn',data.current == 3?'active':'']" @click="data.current = 3">户型图</view>
    </view>
  </view>
  <view class="house-box">
    <house-info :houseInfo="data.houseInfo"></house-info>
  </view>
  <view class="house-value u-m-t-20 u-m-b-20">
    <view class="title">房源价值点</view>
    <view class=" u-m-t-16">
      {{data.houseInfo.description}}
    </view>
    <image src="@/static/images/01_31fg.png" class="right-icon" mode=""></image>
  </view>
  <view class="tag-box">
    <view class="title">房源标签</view>
    <view class="house-tag" v-for="(item,index) in data.houseInfo.labels_text" :key="index">{{item}}</view>
  </view>
  <view class="house-value u-m-t-20 u-m-b-20">
    <view class="title">房屋顾问</view>
    <view class="u-flex-y-center u-flex-between u-m-t-16">
      <view class="u-flex-y-center">
        <image :src="prefixURL(data.houseInfo.broker.avatar)" class="house-avatar" mode=""></image>
        <view>{{data.houseInfo.broker.nickname}}</view>
      </view>
      <view class="u-flex-y-center">
        <image src="@/static/images/01_31gg.png" class="house-icon"
          @click="$u.route(`/pages/houseMessage/messageDetail?chat_id=${data.houseInfo.broker.id}&chat_name=${data.houseInfo.broker.nickname}`)"
          mode=""></image>
        <image src="@/static/images/01_dd.png" class="house-icon" @click="handleCall" mode=""></image>
      </view>
    </view>
    <image src="@/static/images/01_31fg.png" class="right-icon" mode=""></image>
  </view>
  <view class="house-swiper">
    <view class="title">房屋图片</view>
    <up-swiper :list="data.houseInfo.images" height="516rpx" indicator indicatorMode="line" circular></up-swiper>
  </view>
  <view class="action-bar">
    <u-row gutter="14">
      <u-col span="4">
        <u-button color="#F87610" shape="circle" plain
          @click="$u.route(`/pages/houseMessage/messageDetail?chat_id=${data.houseInfo.broker.id}&chat_name=${data.houseInfo.broker.nickname}`)">在线咨询</u-button>
      </u-col>
      <u-col span="4">
        <u-button color="#F87610" shape="circle" class="u-m-l-28" plain @click="handleCall">电话咨询</u-button>
      </u-col>
      <u-col span="4">
        <u-button color="#F87610" shape="circle" class="u-m-l-28"
          @click="$u.route(`/pages/index/reserveHouse?id=${id}`)">
          预约看房
        </u-button>
      </u-col>
    </u-row>
  </view>
  <back-page></back-page>
</template>

<script setup>
  import { houseDetail } from '@/config/api';
  import houseInfo from './components/house-info.vue';
  import { getCache, prefixURL, setCache } from '@/util/util';
  import { onMounted, ref } from 'vue';
  import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
  const props = defineProps({
    id: {
      type: [String, Number],
      default: ''
    },
    user_id: {
      type: [String, Number],
      default: ''
    }
  })
  const data = ref({
    current: 1,
    list: [],
    houseInfo: {
      broker: {}
    }
  })
	if(props.user_id){
		setCache('invite',props.user_id)
	}
  onShareTimeline(() => {
    let userInfo = getCache('userInfo')
    return {
      path: `/pages/index/index?code=${props.id}&user_id=${userInfo.user_id}`
    }
  })
  onShareAppMessage((e) => {
    let userInfo = getCache('userInfo')
    return {
      path: `/pages/index/index?code=${props.id}&user_id=${userInfo.user_id}`
    }
  })
  onMounted(() => {
    _houseDetail()
  })
  const handleCall = () => {
    uni.makePhoneCall({
      phoneNumber: data.value.houseInfo.user_phone
    })
  }
  const _houseDetail = () => {
    houseDetail({ id: props.id, user_id: props.user_id }).then(res => {
      data.value.houseInfo = res.data
      data.value.houseInfo.images = data.value.houseInfo.images.map(item => {
        item = prefixURL(item)
        return item
      })
    })
  }
</script>

<style scoped lang="scss">
  .banner-box {
    position: absolute;
    top: 0;
    left: 0;
    height: 516rpx;
    width: 100%;

    .banner-img {
      width: 100%;
      height: 100%;
    }

    .change-box {
      position: absolute;
      bottom: 40rpx;
      left: 0;
      right: 0;


      .banner-btn {
        width: 100rpx;
        height: 42rpx;
        background: rgba(0, 0, 0, .2);
        border-radius: 22rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #fff;
        text-align: center;
        line-height: 38rpx;
        border: 1px solid rgba(0, 0, 0, 0);
      }

      .banner-btn+.banner-btn {
        margin-left: 28rpx;
      }

      .active {
        border: 1px solid #fff;
      }
    }
  }

  .house-box {
    padding: 20rpx;
    margin-top: 340rpx;
    background: #fff;

    ::v-deep .u-row {
      flex-wrap: wrap;
    }
  }

  .house-value {
    padding: 20rpx;
    font-size: 26rpx;
    font-weight: 500;
    color: #000;
    position: relative;
    background: linear-gradient(89deg, #FFF8F7 0%, #FFE8E5 100%);
    border-radius: 12rpx;

    .right-icon {
      position: absolute;
      top: 10rpx;
      right: 20rpx;
      width: 70rpx;
      height: 56rpx;
    }

    .title {
      font-size: 30rpx;
      font-weight: 800;
      color: #000;
    }

    .house-icon {
      width: 84rpx;
      height: 46rpx;
      margin-left: 24rpx;
    }

    .house-avatar {
      width: 76rpx;
      height: 76rpx;
      margin-right: 15rpx;
      border-radius: 50%;
    }
  }

  .tag-box {
    font-size: 24rpx;
    color: #666;
    font-weight: 500;
    background: #fff;
    padding: 20rpx;
    border-radius: 12rpx;

    .title {
      font-size: 28rpx;
      color: #000;
      font-weight: 800;
    }

    .house-tag {
      border: 1px solid #666;
      border-radius: 12rpx;
      display: inline-block;
      width: fit-content;
      padding: 5rpx 16rpx;
      margin-top: 15rpx;
      margin-right: 18rpx;
    }
  }

  .house-swiper {
    padding: 0 20rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);

    .title {
      font-size: 30rpx;
      font-weight: 800;
      color: #000;
      margin-bottom: 20rpx;
    }
  }

  .action-bar {
    position: fixed;
    background: #fff;
    bottom: 0;
    padding: 20rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
    left: 0;
    right: 0;
    z-index: 9;
  }
</style>